<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <!-- {{}} 只能写表达式 不能写语句 -->
        {{count}}
        <div>
            {{count + 10 / 3 *2 %2+10}}
        </div>
        <div>
            {{arr.join('')}}
        </div>

        <div>
            {{str}}
        </div>
        <!-- v-开头的是vue中提供的指令 -->
        <div v-html="str"></div>
        <div v-text="str"></div>
    </div>


    <!-- 引入Vue.js -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- <script src="./vue.global.js"></script> -->
    <script>
        // 使用vue中的函数API
        const { createApp, ref } = Vue;
        // 创建一个vue应用实例
        const app = createApp({
            setup() {
                // 响应式状态都在setup中定义
                // ref函数可以创建一个响应式状态
                const count = ref(5)
                const arr = ['a', 'b', 'c', 'd']
                const str = "<h1>我是标题</h1>"
                // 在dom中使用响应式数据，该数据要return出去
                return {
                    count,
                    arr,
                    str
                }
            }
        })
        // vue实例需要挂载到dom元素上
        app.mount('#app')





    </script>
</body>

</html>